<template>
  <div class="main-view">
    <div class="main-view-button">
      <el-button @click="editData('add')" type="primary">新增企业</el-button>
      <el-input clearable placeholder="请输入要搜索的企业名称" v-model="state.name" class="input-with-select">
        <template #append>
          <el-button class="input-with-button" @click="searchData">搜索</el-button>
        </template>
      </el-input>
    </div>
    <div class="main-view-info" v-loading="state.loading">
      <div v-if="state.listData.length > 0">
        <el-table :max-height="state.posheight" :data="state.listData" border>
          <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
          <el-table-column label="公司名称" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="账户" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.username }}</template>
          </el-table-column>
          <el-table-column label="密码" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.password_raw }}</template>
          </el-table-column>
          <el-table-column label="创建时间" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.created_at }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="280" show-overflow-tooltip align="center">
            <template #default="scope">
              <el-button @click.prevent="editData('update',scope.row)" type="primary" size="small">修改</el-button>
              <el-button @click.prevent="lookQs(scope.row)" type="success" size="small">查看二维码</el-button>
              <el-button @click.prevent="deleteData(scope.row)" type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="right-view-page">
          <el-pagination 
            layout="total, prev, pager, next"
            :total="state.total"
            @current-change="handleCurrentChange"
            :page-size="10"
            :pageSizes='[10, 20, 30, 40]'
            :current-page="state.currentPage">
          </el-pagination>
        </div>
      </div>
      <div v-else class="right-view-nodata">
        <img src="@/assets/img/no-data.png" alt="">
        <div>暂无数据</div>
      </div>
    </div>
    <!-- 新增修改企业 -->
    <el-dialog
      width="30%"
      :title="state.titleName + '企业'"
      :close-on-click-modal="false"
      v-if="state.viewVisible"
      v-model="state.viewVisible">
      <div class="add-dialog">
        <el-form ref="form" :model="state.formData" label-width="80px">
          <el-form-item label="企业名称" required>
            <el-input v-model="state.formData.name" show-word-limit placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="企业账号" required> 
            <el-input v-model="state.formData.username" show-word-limit placeholder="请输入企业账号"></el-input>
          </el-form-item>
          <el-form-item label="账号密码" required> 
            <el-input v-model="state.formData.password_raw" show-word-limit placeholder="请输入账号密码"></el-input>
          </el-form-item>
        </el-form>
        <div class="add-dialog-submit">
          <el-button @click="state.viewVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit()">确认</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 查看二维码 -->
    <el-dialog
      title="二维码"
      :close-on-click-modal="false"
      v-model="state.qsImgVisible"
      width="350px">
      <div v-if="state.qsImgVisible">
        <img :src="state.qsImg" alt="">
      </div>
      <template #footer>
        <div style="text-align: center;font-size: 14px;color: #FF0000;">鼠标右击可保存图片到本地哦</div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref,reactive,onMounted,watch } from 'vue';
  import { ElMessage , ElMessageBox } from 'element-plus';
  import API from "@/utils/api";
  const state = reactive({
    loading:false,
    listData:[],
    h: document.body.clientHeight,
    posheight: 100,
    timer: false,
    total:0,
    currentPage:1,
    titleName:'新增',
    viewVisible:false,
    name:'',
    formData:{
      username:'',
      password_raw:'',
      name:'',
    },
    rowInfos:{},
    qsImgVisible:false,
    qsImg:'',
  })
  watch(() => state.h, (newValue, oldValue) => {
    if(!state.timer) {
      state.posheight = newValue - 150
      state.timer = true
      setTimeout(function (){
        state.timer = false
      },400)
    }
  })
  const posTableHeight = (() =>{
    let h = document.body.clientHeight,
    new_h = h - 150;
    state.posheight = new_h;
  })
  onMounted(() => {
    getEnterpriseList()
    posTableHeight()
    window.onresize = () => {
      return (() => {
        let a = document.body.clientHeight
        state.h = a
      })()
    }
  })
  const lookQs = ((item) => {
    getCodeImg(item.id)
  })
  const getCodeImg = ((id) => {
    API.enterpriseList.getCodeImg({id:id}, (res) => {
      if(res.code == 0) {
        state.qsImgVisible = true
        state.qsImg = res.data
      }
    })
  })
  const searchData = (() => {
    state.currentPage = 1
    getEnterpriseList()
  })
  const handleCurrentChange = ((val) => {
    state.currentPage = val
    getEnterpriseList()
  })
  const deleteData = ((row) => {
    return new Promise((resolve) => {
    ElMessageBox.confirm('你确定要删除该企业吗', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      }).then(() => {
        API.enterpriseList.deleteRow({id:row.id},res => {
          if(res.code == 0) {
            ElMessage.success('删除成功');
            getEnterpriseList()
          }
        })
        return resolve()
      }).catch(() => {
      });
    })
  })
  const editData = ((type,row) => {
    state.viewVisible = true
    if(type == 'add') {
      state.titleName = '新增'
      state.formData.name = ''
      state.formData.username = ''
      state.formData.password_raw = ''
    }else {
      state.rowInfos = row
      state.titleName = '编辑'
      state.formData.name = row.name
      state.formData.username = row.username
      state.formData.password_raw = row.password_raw
    }
  })
  const getEnterpriseList = (() => {
    state.loading = true
    let params = {
      page:state.currentPage,
      limit:10,
      name:state.name,
    }
    API.enterpriseList.getEnterpriseList(params,res => {
      state.loading = false
      if(res.code == 0) {
        state.listData = res.data.details;
        state.total = res.data.total;
      }
    })
  })
  const onSubmit = (() => {
    let message = !state.formData.name && '请输入企业名称' || !state.formData.username && '请输入企业账号' || !state.formData.password_raw && '请输入账号密码' || null;
    if(message) return ElMessage.warning(message);
    if(state.titleName == '新增') {
      API.enterpriseList.addEnterprise({...state.formData},res => {
        if(res.code == 0){
          ElMessage.success('新增成功');
          state.viewVisible = false
          getEnterpriseList()
        }else{
          ElMessage.warning(res.msg);
        }
      })
    }else {
      API.enterpriseList.editEnterprise({...state.formData,id:state.rowInfos.id},res => {
        if(res.code == 0){
          ElMessage.success('修改成功');
          state.viewVisible = false
          getEnterpriseList()
        }else{
          ElMessage.warning(res.msg);
        }
      })
    }
  })
</script>

<style lang="scss" scoped>
.main-view {
  padding: 20px;
  .main-view-button {
    display: flex;
    text-align: start;
    .input-with-select {
      margin-left: 15px;
    }
    .input-with-button {
      color: #fff;
      background: #409eff;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .el-input-group {
      width: 370px;
    }
  }
  .right-view-nodata {
    margin-top: 160px;
  }
  .main-view-info {
    margin: 20px 0;
  }
  .right-view-page {
    display: flex;
    justify-content: end;
    margin-top: 15px;
  }
  .add-dialog {
    .add-dialog-submit {
      margin-top: 30px;
    }
    .add-dialog-checkox {
      max-height: 250px;
      overflow: auto;
      text-align: start;
      padding: 10px;
    }
  }
}
</style>